<template>
  <div class="uni-dialog-form">
    <el-dialog :visible.sync="dialogShow" :title="title" :close-on-click-modal="closeOnClickModal" :close-on-press-escape="closeoOnPressEscape" @close="close" @open="open" :destroy-on-close="true" :width="width" :top="top" :modal="modal" :show-close="showClose" :fullscreen="fullscreenShow&&fullDialog">
      <template slot="title">
        <span class="el-dialog__title">{{title}}</span>
        <button v-if="fullDialog" type="button" class="el-dialog__headerbtn" style="right: 45px;" @click="fullscreenClick()">
          <i v-if="!fullscreenShow" class="el-dialog__close el-icon el-icon-full-screen"></i>
          <i v-else class="el-dialog__close el-icon el-icon-copy-document"></i>
        </button>
      </template>
      <!-- max-height:50vh -->
      <!-- <di v-loading="true" class="sss"> -->
      <div :style="{maxHeight:!fullscreenShow||!fullDialog?'50vh':'80vh'}" v-loading="loading" class="uni-dialog-form-body uni-scroll">
        <!-- <vue-scroll ref="vs" :ops="ops"> -->
        <slot></slot>
        <!-- </vue-scroll> -->
      </div>
      <!-- </di> -->

      <template v-if="!$scopedSlots.footer&&defaultButton" slot="footer">
        <el-button @click="dialogShow = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" :loading="loading" @click="clickEvent()">{{ $t('confirm') }}</el-button>
      </template>
      <template slot="footer" v-if="$scopedSlots.footer">
        <slot name="footer"></slot>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// import vuescroll from 'vuescroll'
export default {
  props: {
    visible: {
      type: Boolean,
      default () {
        return false
      }
    },
    title: {
      type: String,
      default () {
        return 'Form'
      }
    },
    closeOnClickModal: {
      type: Boolean,
      default () {
        return false
      }
    },
    closeoOnPressEscape: {
      type: Boolean,
      default () {
        return false
      }
    },
    loading: {
      type: Boolean,
      default () {
        return false
      }
    },
    defaultButton: {
      type: Boolean,
      default () {
        return false
      }
    },
    width: {
      type: String,
      default () {
        return '50%'
      }
    },
    top: {
      type: String,
      default () {
        return '15vh'
      }
    },
    modal: {
      type: Boolean,
      default () {
        return true
      }
    },
    showClose: {
      type: Boolean,
      default () {
        return true
      }
    },
    // 全屏按钮
    fullDialog: {
      type: Boolean,
      default () {
        return false
      }
    },
    defaultFullscreen: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  created () {
    // console.log('fullscreenShow', this.fullscreen)
    // this.fullscreenShow = this.fullscreen
  },
  watch: {
    visible (val) {
      this.dialogShow = val
    },
    defaultFullscreen (val) {
      this.fullscreenShow = val
    }
  },
  data () {
    return {
      dialogShow: false,
      fullscreenShow: false,
      ops: {
        vuescroll: {
          sizeStrategy: 'number',
          detectResize: true
        },
        scrollPanel: {
          // maxHeight: 100,
          maxWidth: undefined
        }
      }
      // show: false
    }
  },
  mounted () {
    // vuescroll.refreshAll()

    // this.$refs.scroll.refresh()
    // this.$nextTick(() => {
    //   console.log(this.$refs['vs'])
    //   this.$refs['vs'].refresh()
    // })

    // var h =
    //   document.documentElement.clientHeight || document.body.clientHeight
    // this.ops.scrollPanel.maxHeight = Math.floor(h * 0.5)
    // console.log(this.ops.scrollPanel.maxHeight)
  },
  methods: {
    open () {
      this.$nextTick(function () {
        // this.show = true
        // this.$refs.vs.refresh()
      })
    },
    close (val) {
      this.fullscreenShow = this.defaultFullscreen
      // this.visible = false
      this.$emit('update:visible', false)
      this.$emit('close', false)
      // console.log('close', val)
    },
    fullscreenClick () {
      this.fullscreenShow = !this.fullscreenShow
      this.$emit('fullscreenClick', this.fullscreenShow)
    },
    // queryEvent () {
    //   this.$emit('query-click', this.dataForm)
    // },
    clickEvent (val) {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" >
.uni-dialog-form .el-dialog__body {
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
  .uni-dialog-form-body {
    padding-right: 10px;
    padding-left: 10px;
  }
}
</style>
